<?php
	require_once('tools/conn.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>喜欢海</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Whizz Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
		    <script type="text/javascript">
			    $(document).ready(function () {
			        $('#horizontalTab').easyResponsiveTabs({
			            type: 'default', //Types: default, vertical, accordion           
			            width: 'auto', //auto or any width like 600px
			            fit: true   // 100% fit in a container
			        });
			    });
				
</script>	
<!--script-->
<script src="js/jquery.chocolat.js"></script>
		<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
		<!--light-box-files -->
		<script type="text/javascript" charset="utf-8">
		$(function() {
			$('.img-top a').Chocolat();
		});
		</script>
	<style>
		.pageStyle li{
			float: left;
		}
	</style>

</head>
<body>
<!--header-->
<div class="header">
	<div class="container">
		<div class="header-top">
		<div class="top-nav">
			<span class="menu"><img src="images/menu.png" alt=""> </span>
				<ul>
					<li ><a href="index.php" class="color"><i class="glyphicon glyphicon-home"></i>  </a> </li>
					<li><a href="portfolio.php"   class="hvr-bounce-to-top">分类照片</a></li>
<!--					<li ><a href="404.php" class="hvr-bounce-to-top">暂定 </a> </li>-->
					<li><a href="blog.php"  class="hvr-bounce-to-top">博客 </a></li>
					<li><a href="about.php"  class="hvr-bounce-to-top">关于我 </a></li>
					<!--					<li><a href="typo.php"  class="hvr-bounce-to-top">Typo </a></li>-->
					<li><a href="contact.php"  class="hvr-bounce-to-top">联系我 </a></li>
				<div class="clearfix"> </div>
				</ul>
					<!--script-->
				<script>
					$("span.menu").click(function(){
						$(".top-nav ul").slideToggle(500, function(){
						});
					});
			</script>	
		</div>
		 <div class="search-in" >
<!--			<div class="search" >-->
<!--				<form >-->
<!--					<input type="text"  class="text">-->
<!--					<input type="submit" value="SEARCH">-->
<!--				</form>-->
<!--				<div class="close-in"><img src="images/close.png" alt="" /></div>-->
<!--			</div>-->
<!--			<div class="right"><button> </button></div>-->
		</div>
			<script type="text/javascript">
				$('.search').hide();
				$('button').click(function (){
				$('.search').show();
				$('.text').focus();
				}
				);
				$('.close-in').click(function(){
				$('.search').hide();
				});
			</script>
			<div class="clearfix"> </div>
		</div>
		<div class="logo">
			<a href="index.php"><img src="images/logo.png" alt="">	</a>
		</div>
	</div>
</div>
<!--//header-->
<!--content-->
	<div class="portfolio">
	<div class="container">
	<div class="portfolio-top ">
						<h1>类别</h1>
					</div>	
		<div class="sap_tabs">
			
						 <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						  <ul class="resp-tabs-list">
						  	  <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Spring</span></li><b>/</b>
							  <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Summer</span></li><b>/</b>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Autumn</span></li><b>/</b>
							 <li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>Winter</span></li>
							  <div class="clearfix"></div>
						  </ul>


							<div class="resp-tabs-container">
							    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
									<div class="tab_img">
										<?php
											$pagesize = 9;

											$sql = "select * from article where article_season = ?";
											$stmt = $db->prepare($sql);
											$stmt->bindValue(1, 1);
											$stmt->execute();

											$result = $stmt->fetchAll(PDO::FETCH_BOTH);

											// 记录图片总数
											$total = 0;
											$picArrs = array();

											// 	循环遍历 累加图片总数
											foreach($result as $key){
												$picArr = explode(';', $key['article_pictures']);
												$total += sizeof($picArr);
												$picArrs = array_merge($picArrs, $picArr);
											}
//											print_r($picArrs);

											// 总页数
											$pages = ceil($total / $pagesize);

											// 设置页数
											if(isset($_GET['page'])){
												$page = $_GET['page'];
											}else{
												$page = 1;
											}

											// 记录偏移量
											$offset = $pagesize * ($page - 1);

											// 记录每页显示的图片数
											$count = 0;

											// 循环遍历显示图片
											for($i = $offset; $i < $total; $i++){
												if($count < 9){
													$count++;
											?>
													<div class="col-md-4 img-top ">
														<a href="<?php echo 'articlePictures/'.$picArrs[$i];?>" rel="title" class="b-link-stripe b-animate-go  thickbox">
															<img style="width: 435px; height: 290px;" src="<?php echo 'articlePictures/'.$picArrs[$i];?>" class="img-responsive" alt=""/>
															<div class="link-top">
																<h5>Tour</h5>
															</div>
														</a>

													</div>
											<?php
												}
											}
										?>
									<div class="clearfix"></div>
							     </div>
								 <div class="clearfix"></div>

<!--									分页显示区域-->
									<div style="margin-top: 30px; margin-left: 20px">
										<ul style="list-style: none" class="pageStyle">
											<?php
											$first = 1;
											$prev = $page - 1;
											$next = $page + 1;
											$last = $pages;
											echo('<li><a href="#">共 '.$pages.' 页&nbsp;&nbsp;</a></li>');

											if($page > 1){
												echo('<li><a href="portfolio.php?page='.$first.'" >首页&nbsp;&nbsp;</a></li>');
												echo('<li><a href="portfolio.php?page='.$prev.'" >上一页&nbsp;&nbsp;</a></li>');
											}
											if($pages > 1){
												for($p = 1; $p <= $pages; $p++){
													if($p == $page){
														echo('<li><a href="#">[ '.$p.' ]&nbsp;&nbsp;</a></li>');
													}else{
														echo('<li><a href="portfolio.php?page='.$p.'">'.$p.'&nbsp;&nbsp;</a></li>');
													}
												}
											}
											if($page <$pages){
												echo '<li><a href="portfolio.php?page='.$next.'">下一页&nbsp;&nbsp;</a></li>';
												echo '<li><a href="portfolio.php?page='.$last.'">末页&nbsp;&nbsp;</a></li>';
											}
											?>
										</ul>
									</div>
							     </div>
						  </div>



<!--							 夏-->
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="tab_img">
									    <div class="col-md-4 img-top ">
					   		  			   <a href="images/po.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/po.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <h5>Tour</h5>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"></div>
							     </div>
						  </div>

<!--							 秋-->
						    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
							     <div class="tab_img">
									  <div class="col-md-4 img-top ">
					   		  			   <a href="images/po6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/po6.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <h5>Tour</h5>
												 </div>
					   		  			   </a>
										</div>
										<div class="clearfix"></div>
							 	 </div>
						  	</div>

<!--							 冬-->
						   <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
						   		<div class="tab_img">
										<div class="col-md-4 img-top ">
					   		  			   <a href="images/po7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/po7.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <h5>Tour</h5>
												 </div>
					   		  			   </a>
										</div>
										<div class="clearfix"></div>
							     </div>	
							     <div class="tab_img">
										<div class="col-md-4 img-top ">
					   		  			   <a href="images/po2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/po2.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												<h5>Tour</h5>
												 </div>
					   		  			   </a>
										</div>
										<div class="clearfix"></div>
							     </div>	
							     <div class="tab_img">
									  <div class="col-md-4 img-top ">
					   		  			   <a href="images/po8.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/po8.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <h5>Tour</h5>
												 </div>
					   		  			   </a>
										</div>
										<div class="clearfix"></div>
							     </div>	
						   	</div>		
                  </div>
          </div>
         </div>
         </div>	
</div>

<!--//content-->
<div class="footer">
		<div class="container">
				<div class="footer-class">
				<div class="col-md-10 class-footer">
					<ul>
						<li ><a href="index.php" >首页</a> </li>
						<li><a href="portfolio.php" >分类照片</a></li>
<!--						<li ><a href="404.php" >Tours </a> </li>-->
						<li><a href="blog.php" >博客 </a></li>
						<li><a href="about.php" >关于我 </a></li>
<!--						<li><a href="typo.php" >Typo </a></li>-->
						<li><a href="contact.php" >联系我 </a></li>
						<li><a href="tools/doAction.php?action=checkCookies" >进入后台管理 </a></li>
					</ul>
						 <p class="footer-grid">Copyright &copy; 2015.Company name All rights reserved.</p>

				</div>	
				<div class="col-md-2"> 
					 <ul class="social">
						<li ><a href="#"><i> </i></a></li>
						<li ><a href="#"><i class="facebook"> </i></a></li>
						<li ><a href="#"><i class="google"> </i></a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			 	</div>
		 </div>
		
	</div>
</body>
</html>